<template>
  <a-config-provider :locale="locale">
    <div id="app">
<!--      使用栅格布局-->
      <a-layout id="components-layout-demo-side" style="min-height: 100vh;">
        <a-row style="width:100%">
          <a-col :span="4" class="col_item">
            <a-layout-sider v-model="collapsed" style="background:white;" width="100%">
          <div style="box-shadow: 0.25em 0.25em 0.25em rgba(169,194,233,.24);padding: 1.5em;">
            <span class="index_system_name">湖南科技大学</span> <span  @click="tempRoute()">出卷系统</span>
          </div>
          <router-link to="/admin/index">
            <div class="index_admin_box">
              <img class="index_admin_logo" :src="adminLogo" />
              <span class="index_admin_text">院级管理员<br>{{adminName}}</span>
            </div>
          </router-link>
          <a-menu :key="this.keyPath" class="index_side_bar" theme="light" :default-selected-keys="[keyPath[0]]" mode="inline" :default-open-keys="[keyPath[1]]" :open-keys="openKeys" @click="handleClick" @openChange="onOpenChange">
            <a-sub-menu key="sub1">
              <span slot="title"><img class="index_side_icon" :src="icon1"><span class="index_side_text">用户管理</span></span>
              <a-menu-item key="1">
                <router-link to="/admin/user/stulist">
                学生列表
                </router-link>
              </a-menu-item>

              <a-menu-item key="2">
                <router-link to="/admin/user/teacherList">
                  老师列表
                </router-link>
              </a-menu-item>
              <a-menu-item key="3">
                <router-link to="/admin/user/batchImport">
                  批量导入
                </router-link>
              </a-menu-item>
<!--              <a-menu-item key="4">-->
<!--                <router-link to="/admin/user/notice">-->
<!--                  发布通知-->
<!--                </router-link>-->
<!--              </a-menu-item>-->
<!--              <a-menu-item key="5">-->
<!--                <router-link to="/admin/user/auditRegister">-->
<!--                  审核注册-->
<!--                </router-link>-->
<!--              </a-menu-item>-->
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title"><img class="index_side_icon" :src="icon2"><span class="index_side_text">课程管理</span></span>
              <a-menu-item key="6">
                <router-link to="/admin/course/courseList">
                  课程列表
                </router-link>
              </a-menu-item>
              <a-menu-item key="7">
                <router-link to="/admin/course/batchImport">批量导入</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title"><img class="index_side_icon" :src="icon3"><span class="index_side_text">课程组管理</span></span>
              <a-menu-item key="8">
                <router-link to="/admin/courseGroup/coursegroup">课程组列表</router-link>
              </a-menu-item>
<!--              <a-menu-item key="9">-->
<!--                <router-link to="/admin/courseGroup/batchImport">-->
<!--                  批量导入-->
<!--                </router-link>-->
<!--              </a-menu-item>-->
<!--              <a-menu-item key="10">-->
<!--                <router-link to="/admin/courseGroup/auditJoin">-->
<!--                  审核加入-->
<!--                </router-link>-->
<!--              </a-menu-item>-->
            </a-sub-menu>
            <a-menu-item key="11">
              <img class="index_side_icon" :src="icon4">
              <span class="index_side_text index_side_text_cur" @click="toAdminClasses">班级管理</span>
            </a-menu-item>
            <a-menu-item key="12">
              <img class="index_side_icon" :src="icon5">
              <span class="index_side_text index_side_text_cur" @click="toAdminMajor">
                专业管理
              </span>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
          </a-col>
          <a-col :span="20" class="col_item" style="background: #CEDEF5">
            <a-layout>
              <a-layout-header style="background: #fff; padding: 0 6em; text-align: right;">
                <span style="font-size: large; margin: 0 1em;cursor: pointer" @click="refreshPage"><a-icon type="sync" style="color:#FFDEAD; font-size: large;" />刷新</span>
                <span style="font-size: large;cursor: pointer" @click="loginOut"><a-icon type="poweroff" style="color:#87CEFA; font-size: large;" />退出</span>
              </a-layout-header>
              <a-layout-content style="padding: 0 16px;background: #CEDEF5">
                <a-breadcrumb style="padding: 1em;text-align: left">
                  <a-breadcrumb-item>{{ itemOne }}</a-breadcrumb-item>
                  <a-breadcrumb-item>{{ itemTwo }}</a-breadcrumb-item>
                </a-breadcrumb>
                <a-row id="main" :style="{ padding: '1%', background: 'white', height: '80%', position: 'absolute', textAlign: 'center', width: '95%', margin: '1% auto', overflowY: 'auto' }">
                  <a-result v-if="getTokenCookies() === undefined" status="warning" title="请重新登陆">
                    <template #extra>
                      <a-button key="console" type="primary" @click="()=>$router.push('/login')">
                        前去登陆
                      </a-button>
                    </template>
                  </a-result>
                    <router-view v-else />
                </a-row>
              </a-layout-content>
              <a-layout-footer style="text-align: center;background: #CEDEF5">
                Ant Design ©2018 Created by Ant UED
              </a-layout-footer>
            </a-layout>
          </a-col>
        </a-row>
      </a-layout>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import adminLogo from '@/assets/image/icon1.png'
import Icon1 from '@/assets/image/icon2.png'
import Icon2 from '@/assets/image/icon3.png'
import Icon3 from '@/assets/image/icon4.png'
import Icon4 from '@/assets/image/icon5.png'
import Icon5 from '@/assets/image/icon6.png'
import { mapGetters } from 'vuex'
import Cookies from 'js-cookie'
import Cookie from "js-cookie"; // 引入js-cookie
export default {
  data() {
    let keyPath = Cookies.get("keyPath") // 取侧边栏的存储路径
    if(keyPath !== undefined){
      keyPath = JSON.parse(keyPath)
      if(keyPath.length === 1){
        keyPath.push('1')
      }
    }else{
      keyPath = ['sub1', '1']
    }
    return {
      collapsed: false,
      adminLogo:adminLogo,
      icon1:Icon1,
      icon2:Icon2,
      icon3:Icon3,
      icon4:Icon4,
      icon5:Icon5,
      locale: zhCN,
      keyPath: keyPath,
      rootSubmenuKeys: ['sub1', 'sub2', 'sub3'],
      openKeys: [keyPath[1]],
      itemOne: "院级管理员",
      itemTwo: ''
    };
  },
  computed:{
    ...mapGetters({
      adminName:'access/adminName'
    })
  },
  methods: {
    tempRoute(){
      Cookie.set("keyPath", ["2"])
      this.keyPath =  ["2"]
      this.$router.push('/admin/user/teacherList')
    },
    //刷新页面
    refreshPage() {
      location.reload()
    },
    // 退出登录
    loginOut(){
      Object.keys(Cookies.get()).forEach(function(cookieName) { // 删除所有cookie
        var neededAttributes = {};
        Cookies.remove(cookieName, neededAttributes);
      });
      this.$router.push('/login')
    },
    toAdminMajor(){ // 路由跳转去专业管理
      if("/admin/major" !== this.$route.path){
        this.$router.push('/admin/major')
      }
    },
    toAdminClasses(){ // 路由跳转去班级管理
      if("/admin/classes" !== this.$route.path){
        this.$router.push('/admin/classes')
      }
    },
    handleClick(e){ // 点击菜单栏
      //console.log("路径", e.keyPath)
      this.keyPath =  e.keyPath
      Cookies.set("keyPath", e.keyPath, {
        expires: 1/24
      }) // 存储一个小时
      this.setItemPath();
    },
    getTokenCookies(){ // 获取cookies里面的token
      return Cookies.get('token')
    },
    // 绑定菜单栏展开事件，实现展开菜单栏时收缩其他菜单栏
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    setItemPath(){
      let nowPath = this.$route.path
      switch (nowPath) {
        case "/admin/major": this.itemTwo = "专业管理"; break;
        case "/admin/classes": this.itemTwo = "班级管理"; break;
        case "/admin/user/stulist": this.itemTwo = "用户管理 / 学生列表"; break;
        case "/admin/user/teacherList": this.itemTwo = "用户管理 / 老师列表"; break;
        case "/admin/user/batchImport": this.itemTwo = "用户管理 / 批量导入"; break;
        case "/admin/user/notice": this.itemTwo = "用户管理 / 发布通知"; break;
        case "/admin/user/auditRegister": this.itemTwo = "用户管理 / 审核注册"; break;
        case "/admin/course/courseList": this.itemTwo = "课程管理 / 课程列表"; break;
        case "/admin/course/batchImport": this.itemTwo = "课程管理 / 批量导入"; break;
        case "/admin/courseGroup/courseGroup": this.itemTwo = "课程组管理 / 课程组列表"; break;
        case "/admin/courseGroup/batchImport": this.itemTwo = "课程组管理 / 批量导入"; break;
        default: this.itemTwo = "课程组管理 / 审核加入"; break;
      }
    }
  },
  mounted() {
    this.setItemPath()
  }
};
</script>

<style>
.index_system_name{
  font-weight: bolder;
  font-size: 1.2em;
  margin-right: 1em;
}
.index_admin_box{
  display: flex;
  justify-content: center;
  border-bottom: #ECECEC 1px solid;
  margin: 1em 0;padding: 1.5em 0;
}
.index_admin_logo{
  width: 3em;
  height: 3em;
}
.index_admin_text{
  font-weight: bolder;
  margin-left: 1em;
  display: flex;
  justify-content: center;
  line-height: 2em;
}
.index_side_icon{
  max-width: 2em;
  max-height: 2em;
  margin-right: 2em;
}
.index_side_bar{
  width: 20em;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
.index_side_text{
  width: 5em;
  /*让span的宽度生效*/
  display: inline-block;
}
.index_side_text_cur{
  margin-right: 1em;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
#components-layout-demo-side .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
/*侧边栏栅格布局*/
.col_item{
  height: 100%;
  background: #ffffff;
}
</style>
